<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>manually touch example</title>
    <script src="../../node_modules/vue/dist/vue.js"></script>
    <script src="../../dist/vue-validator.js"></script>
    <style>
      input.invalid { border-color: red; }
      .errors { color: red; }
    </style>
  </head>
  <body>
    <div id="app">
      <label for="username">username:</label>
      <validity ref="validity" 
                field="username" 
                v-model="validation" 
                :validators="{ required: true, minlength: 4 }">
        <input type="text" 
        @input="$refs.validity.validate()" 
        @focusin="$refs.validity.validate()" 
        @focusout="$refs.validity.touch()">
      </validity>
      <p class="touch" v-if="validation.result.touched">Touch!!</p>
      <div class="errors">
        <p class="required" v-if="validation.result.required">required username!!</p>
        <p class="minlength" v-if="validation.result.minlength">too short username!!</p>
      </div>
      <div class="result">
        <p>validation result:</p>
        <pre>{{validation.result}}</pre>
      </div>
    </div>
    <script>
      var vm = new Vue({
        data: {
          validation: {
            result: {}
          }
        }
      }).$mount('#app')
    </script>
  </body>
</html>
